<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>灾险上传 | 上饶防旱抗汛系统</title>

    <!-- 我们提供了CDN地址可以直接使用，并且强烈建议使用我们的CDN而不是下载到本地-->
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <link rel="stylesheet" href="./static/weui.min.css">
    <!-- 本地资源
    <link rel="stylesheet" href="../static/mui/sm.min.css">
    <link rel="stylesheet" href="../static/mui/sm-extend.css">-->
    <!--上传图片
    <script type="application/javascript" src="../static/js/hswx.js"></script>-->

</head>
<body>
<div class="page">
    <header class="bar bar-nav">
        <h1 class='title' style="font-weight: bold;">上饶市防旱抗汛灾险上报中心</h1>
    </header>
    <div class="content">
        <form action="/test" id="zxupload" name="zxupload" method="post">
            <div class="weui_cells">
                <!-- 事件类型 -->
                <div class="weui_cell weui_cell_select weui_select_after">
                    <div class="weui_cell_hd">
                        <label for="Etype" class="weui_label">事件类型</label>
                    </div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <select id="Etype" class="weui_select" name="Etypeselect">
                            <option selected="" value="1">道路积水</option>
                            <option value="2">山体滑坡</option>
                            <option value="3">堤垸险情</option>
                            <option value="4">水库险情</option>
                            <option value="5">河坝险情</option>
                            <option value="6">人员围困</option>
                            <option value="7">其他</option>
                        </select>
                    </div>
                </div>
                <!-- 事件地点 -->
                <div class="weui_cell weui_cell_select weui_select_after">
                    <div class="weui_cell_hd">
                        <label for="Eloc" class="weui_label">事件地点</label>
                    </div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <select id="Eloc" class="weui_select" name="Elocselect">
                            <option selected="" value="1">德兴市</option>
                            <option value="2">婺源县</option>
                            <option value="3">万年县</option>
                            <option value="4">鄱阳县</option>
                            <option value="5">余干县</option>
                            <option value="6">弋阳县</option>
                            <option value="7">横峰县</option>
                            <option value="8">铅山县</option>
                            <option value="9">玉山县</option>
                            <option value="10">上饶县</option>
                            <option value="11">广丰区</option>
                            <option value="12">信州区</option>
                            <option value="13">上饶市经济开发区</option>
                            <option value="14">其中市辖区</option>
                        </select>
                    </div>
                </div>
                <!-- 详细地址 -->
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label for="detailloc" class="weui_label">详细地址</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input id="detailloc" name="detailloc" class="weui_input" type="text" value="" placeholder="请输入灾险点详细地址" rows="2" autofocus="autofocus" required/>
                        <!--<textarea class="weui_textarea" placeholder="请输入灾险点详细地址" rows="2" ></textarea>-->
                    </div>
                </div>
                <!-- 灾险情时间 -->
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label for="zxdatetime" class="weui_label">灾险时间</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input id="zxdatetime" name="zxdatetime" class="weui_input" type="datetime-local" value="" placeholder="请点击选择时间"/>
                    </div>
                </div>
                <!-- 联系人 -->
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label for="zxman" class="weui_label">联系人</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input id="zxman" name="zxman" class="weui_input" type="text" value="" placeholder="请输入联系人姓名" required/>
                    </div>
                </div>
                <!-- 手机号 -->
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label for="zxtel" class="weui_label">手机号</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input id="zxtel" name="zxtel" class="weui_input" type="tel" value="" placeholder="请输入联系人手机号" required/>
                    </div>
                </div>
            </div>
            <!-- 事件描述 -->
            <div class="weui_cells_title" style="font-size: inherit;color: #3d4145;margin-bottom: 0;">事件描述</div>
            <div class="weui_cells weui_cells_form">
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <textarea id="zxinfo_detail" name="zxinfo_detail" class="weui_textarea" maxlength="200" placeholder="请输入灾险的详细描述信息" rows="3"></textarea>
                        <div class="weui_textarea_counter"><span id="zxinfo_num">0</span>/200</div>
                    </div>
                </div>
            </div>
            <!-- 上传图片 -->
            <div class="weui_cells weui_cells_form">
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">
                            <div class="weui_uploader_hd weui_cell">
                                <div class="weui_cell_bd weui_cell_primary">图片上传</div>
                                <div class="weui_cell_ft"></div>
                            </div>
                            <div class="weui_uploader_bd">
                                <ul class="weui_uploader_files">
                                    <li class="weui_uploader_file"><canvas id="uploadimg"></canvas></canvas></li>
                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                                        <div class="weui_uploader_status_content">
                                            <i class="weui_icon_warn"></i>
                                        </div>
                                    </li>
                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                                        <div class="weui_uploader_status_content">50%</div>
                                    </li>
                                </ul>
                                <div class="weui_uploader_input_wrp">
                                    <input id="file" name="file" class="weui_uploader_input" type="file" accept="image/*" multiple />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提交 -->
            <div class="content-block">
                <div class="row">
                    <input id="submit" hidden type="submit">
                    <div class="col-100"><a onclick="document.getElementById('submit').click();" href="#" class="button button-big button-fill button-success">提&nbsp;交</a></div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- SUI -->
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<!-- local
<script type='text/javascript' src='../static/mui/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='../static/mui/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../static/mui/sm-extend.js' charset='utf-8'></script>-->
<script type='text/javascript' src='./static/router.min.js' charset='utf-8'></script>
<script>
    /* 验证表单数据是否正确 */
    function checkinput() {
        /* 手机号 */
        var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
        var res1 = reg.test(document.getElementById("zxtel").value);
    }
    window.onload = function () {
        /* 验证手机号 */
        var tel = 18767802354;
        var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;

        /*获取监听的对象*/
        var l=document.getElementById("zxinfo_detail");
        l.addEventListener("input", function () {
            /*只要输入框内容发生变化都会触发input*/
            if(this.value.length==200){
                document.getElementById("zxinfo_num").style.color = "red";
            }
            document.getElementById("zxinfo_num").innerHTML = this.value.length;//这就是当前输入框实时的内容
        });
    }

</script>
</body>
</html>